/*
 * @Author: xiangxiaojun
 * @Date: 2022-04-19 11:20:25
 * @Descripttion: 卡片视图
 */
import React, { useState } from 'react';
import _ from 'lodash';
import { Popover } from 'antd';
import { InbizIcon } from '@inbiz/utils';
import BizHeader from '@inbiz/basic/BizHeader';
import BizBody from '@inbiz/basic/BizBody';
import { getUserAvatarBytoken } from '../services';
import '../style.less';

import { TextWidget, getMessage } from '@inbiz/react';
const prefixCls = 'inbiz-PersonalInfo';

const CardView = (props: any) => {
  const { signOut, editInfo, userInfo, random } = props;

  const [showOption, $setShowOption] = useState(true); // 控制关于/设置 下拉组件

  const avatar = userInfo ? getUserAvatarBytoken(_.get(userInfo, 'IdentityId')) : '';
  const contSty = { display: showOption ? 'block' : 'none' };
  return (
    <div className={`${prefixCls}-CardView`}>
      <BizHeader {...props} />
      <BizBody {...props}>
        <div className={`${prefixCls}-CardView-Info`}>
          <Popover
            placement="bottomRight"
            overlayClassName={`${prefixCls}-card-popover`}
            content={
              <ul className="card-view-option" style={contSty}>
                <li
                  onClick={() => {
                    $setShowOption(false);
                    editInfo && editInfo();
                  }}
                  title={getMessage('personalInfo.setting')}
                >
                  <TextWidget>personalInfo.setting</TextWidget>
                </li>
                <li
                  onClick={() => {
                    $setShowOption(false);
                    signOut && signOut();
                  }}
                  title={getMessage('personalInfo.signOut')}
                >
                  <TextWidget>personalInfo.signOut</TextWidget>
                </li>
              </ul>
            }
            trigger="hover"
          >
            <div
              className="cardview-tips"
              onMouseOver={(e) => {
                e.stopPropagation();
                $setShowOption(true);
              }}
            >
              <InbizIcon type="icon-ic-more" style={{ fontSize: 20 }} />
            </div>
          </Popover>

          <div className={`${prefixCls}-CardView-ImgHead`}>
            {avatar ? <img className={`${prefixCls}-CardView-ImgHead-Img`} src={`${avatar}&r=${random}`} /> : null}
          </div>
          <div className={`${prefixCls}-CardView-name`}>{_.get(userInfo, 'Name')}</div>
          <div className={`${prefixCls}-CardView-btn`}>{_.get(userInfo, 'MainDepartmentName')}</div>
          <div className={`${prefixCls}-CardView-email`}>
            <div style={{ marginBottom: 10, fontSize: 14 }} title={_.get(userInfo, 'Email')}>
              <InbizIcon
                type="icon-ic-50"
                style={{ fontSize: 16, color: 'var(--inbiz-color-text)', marginRight: 10 }}
              />
              {_.get(userInfo, 'Email')}
            </div>
            <div style={{ fontSize: 14 }} title={_.get(userInfo, 'Mobile')}>
              <InbizIcon
                type="icon-ic-26"
                style={{ fontSize: 16, color: 'var(--inbiz-color-text)', marginRight: 10 }}
              />
              {_.get(userInfo, 'Mobile')}
            </div>
          </div>
        </div>
      </BizBody>
    </div>
  );
};
export default CardView;
